<template>
  <div  v-show="show"  @click="hanleClick" class="to-top-container">
      top
  </div>
</template>

<script>
export default {
   data(){
      return {
        show:false,
      }
},
created(){
    this.$Bus.$on('mainScroll',this.hanleScroll);
 },
destroyed(){
    this.$Bus.$off('mainScroll',this.hanleScroll);
  },
methods:{
 
  hanleScroll(dom){
   if(!dom){
     this.show=false;  
     return;
    }
    this.show=dom.scrollTop >= 500;
  },
   hanleClick(){
    this.$Bus.$emit('setMianScroll', 0)
  },

},


}
</script>

<style lang="less" scoped>
@import "../../style/var.less";
.to-top-container{
    position: fixed;
    right:50px;
    bottom: 25px;
    z-index:99;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background:@primary ;
}
</style>